<!DOCTYPE html>
<html lang="en">

<head>
    <title>My BCIT Project</title>
    <meta name="comp1800 template" content="My 1800 App">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入自定义样式文件 -->
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg bg-body-tertiary">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="index copy.html">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="energy.html">New Energy Articles</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="man.html">New Energy Technologies</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="new energy.html">New Energy Creations</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="sun.html">Mini Quizzes On New Energy Knowledge</a>
                    </li>
                </ul>
                <!-- 登录表单 - 移动到导航栏右侧 -->
                <form class="d-flex">
                    <div class="input-group">
                        <button class="btn btn-primary btn-sm" type="button" id="button1">Sign in</button>
                    </div>
                </form>
            </div>
        </div>
    </nav>

    <div class="container">
        <div class="row">
            <!-- 卡片 1 -->
            <div class="col-md-4 mb-4">
                <div class="card">
                    <img src="./images/风能.jpg" class="card-img-top" alt="Wind Energy" height="180">
                    <div class="card-body">
                        <h5 class="card-title">Wind Energy</h5>
                        <p class="card-text">
                            Clean & Sustainable – Produces no greenhouse gas emissions during operation.<br>
                            Renewable – Relies on inexhaustible wind resources.<br>
                            Mature Technology – Onshore wind is well-established; offshore wind is expanding rapidly.<br>
                            Intermittency – Output varies with wind conditions, requiring grid flexibility or storage.
                        </p>
                        <a href="#" class="btn btn-primary">Learn More</a>
                    </div>
                </div>
            </div>

            <!-- 卡片 2 -->
            <div class="col-md-4 mb-4">
                <div class="card">
                    <img src="./images/太阳能.jpg" class="card-img-top" alt="Solar Energy" height="180">
                    <div class="card-body">
                        <h5 class="card-title">Solar Energy</h5>
                        <p class="card-text">
                            Clean & Abundant – Uses sunlight to generate electricity with no emissions.<br>
                            Scalable – Suitable for rooftops or large solar farms.<br>
                            Declining Costs – Solar panel prices continue to drop.<br>
                            Daytime-Dependent – Requires storage or hybrid systems for night-time use.
                        </p>
                        <a href="#" class="btn btn-primary">Learn More</a>
                    </div>
                </div>
            </div>

            <!-- 卡片 3 -->
            <div class="col-md-4 mb-4">
                <div class="card">
                    <img src="./images/水电.jpg" class="card-img-top" alt="Hydropower" height="180">
                    <div class="card-body">
                        <h5 class="card-title">Hydropower</h5>
                        <p class="card-text">
                            Reliable & Efficient – Provides consistent baseload power.<br>
                            Long Lifespan – Dams can operate for decades.<br>
                            Environmental Impact – May affect aquatic ecosystems.<br>
                            Site-Specific – Requires suitable water flow and elevation.
                        </p>
                        <a href="#" class="btn btn-primary">Learn More</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="all: initial;">
        <div id="__hcfy__" style="all: initial;"></div>
    </div>
    <div id="immersive-translate-popup" style="all: initial"></div>


    <script src="./scripts/tiaozhuan.js"></script>
</body>

</html>